<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container-fluid">
    <link href="/static/dist/lib/uploader/zui.uploader.min.css" rel="stylesheet">
    <script src="/static/dist/lib/uploader/zui.uploader.min.js"></script>
    <script src="/static/dist/lib/sortable/zui.sortable.min.js"></script>
    <style>
        /* 为可拖动的条目应用可移动光标类型 */
        #sortableList > .list-group-item {cursor: move}

        /* 为正在被拖动的条目应用半透明外观 */
        #sortableList > .list-group-item.dragging {
            visibility: visible;
            opacity: .3;
        }
    </style>
    <div class="toolbar-row">
        <div class="btn-toolbar">
            <div class="btn-group">
                <button class="btn album_add_btn"><i class="icon icon-plus"></i><span>添加</span></button>
                <button class="btn album_add_edit"><i class="icon icon-edit"></i><span>编辑</span></button>
                <button class="btn album_add_del"><i class="icon icon-trash"></i><span>移除</span></button>
            </div>
        </div>
    </div>

    <hr>
    <div class="list-row">
        <div class="cards">
        </div>
    </div>

    <script type="application/javascript">
        //        // 定义选项对象
        //        var options = {
        //            selector: '.sortable-item',
        //            finish: function(e) {
        //                console.log('排序完成：', e);
        //                console.log($('.cards').data('zui.sortable').getItems(true));
        //            },
        //            // 设置更多选项...
        //        };
        //
        //        // 初始化时传入选项参数
        //        $('.cards').sortable(options)
        //
        $('.album_add_btn').on('click', function () {
            new $.zui.Messager('即将打开新增窗口', {
                icon: 'heart',
                placement: 'center' // 定义显示位置
            }).show();
            $('body').hrefClick('/admin/activity/album/add');
        });
        $('.album_add_edit').on('click', function () {
            new $.zui.Messager('即将打开编辑窗口', {
                icon: 'heart',
                placement: 'center' // 定义显示位置
            }).show();
            $('body').hrefClick('/admin/activity/album/edit');
        });
        $('.album_add_del').on('click', function () {
            new $.zui.Messager('即将打开新增窗口', {
                icon: 'heart',
                placement: 'center' // 定义显示位置
            }).show();
            $('body').hrefClick('/admin/activity/album/del');
        });


        var pageNo = null;

        function initFileList() {
            var recPerPage = 12;
            if (null == pageNo) {
                pageNo = 1;
                recPerPage = 12;
            }
            $.post('/admin/activity/album/list', {
                "recPerPage": recPerPage,
                "page": pageNo
            }, function (res) {
                if(res && res.result == 'success'){
                    var _html = "";
                    var _datas = res.data;
                    if(_datas.length < 1){
                        $('.loadMore_btn').hide();
                        new $.zui.Messager('已经到底啦', {
                            icon: 'bell', // 定义消息图标
                            type: 'warning'
                        }).show();
                        return false;
                    } else if(_datas.length < 12) {
                        $('.loadMore_btn').hide();
                        new $.zui.Messager('已经到底啦', {
                            icon: 'bell', // 定义消息图标
                            type: 'warning'
                        }).show();

                    }
                    for(var d in _datas) {
                        if(!_datas[d].albumCover){
                            _datas[d].albumCover = '/static/image/11.jpg';
                        }
                        _html += "<div class=\"col-md-4 col-sm-6 col-lg-3 sortable-item\" pagerNo=\""+ pageNo +"\">";
                        _html += "<a class=\"card\" href=\"###\" >";
                        _html += "<div class=\"media-wrapper\" src=\""+_datas[d].albumCover+"\" alt=\""+_datas[d].name+"\" data-group=\"image-group-"+_datas[d].id+"\" >";
                        //_html += "<img src=\""+_datas[d].url+"\" alt=\""+_datas[d].fileName+"\" data-group=\"image-group-1\" >";
                        _html += "<img data-toggle=\"lightbox\" src=\""+_datas[d].albumCover+"\" data-caption=\""+_datas[d].name+"\" alt=\""+_datas[d].name+"\" >";
//                                          //src=\""+_datas[d].url+"\" data-toggle=\"lightbox\" data-group=\"image-group-1\" data-caption=\""+_datas[d].fileName+"\"
                        _html += "</div>";
                        _html += "<div class=\"card-heading\"><strong>"+_datas[d].name+"</strong></div>";
                        //_html += "<div class=\"card-content text-muted\">良辰美景奈何天，赏心乐事谁家院。</div>";
                        _html += "<div class=\"card-actions\">";
                        //_html += "<span class=\"label label-warning\">牡丹亭</span>";
                        _html += "<div style=\"float: left!important;padding-right: 5px;\" class='activity_file_edit'><i class=\"icon-edit\"></i> </div>";
                        _html += "<div style=\"float: left!important;\" class='activity_file_del'><i class=\"icon-trash\"></i> </div>";
                        _html += "<div class=\"pull-right\"><i class=\"icon-comments-alt\"></i> 0</div>";
                        _html += "<div class=\"pull-right text-danger\" style=\"padding-right: 5px;\"><i class=\"icon-heart-empty\"></i> 0</div>";
                        _html += "</div>";
                        _html += "<div class=\"card-actions\">";
                        //_html += "<div class=\"\"><i class=\"icon-trash\"></i> 0</div><button type=\"button\" class=\"btn btn-danger\"><i class=\"icon-heart\"></i> 喜欢</button>";
                        _html += "</div>";
                        _html += "</a>";
                        _html += "</div>";

                    }
                    $('.cards').append(_html);

                    $('.media-wrapper').each(function (e) {
                        $(this).on('click', function () {
                            var _groups = $(this).attr('data-group');
                            if(_groups && _groups.split("-").length == 3 && _groups.split("-")[2]){
                                console.log(_groups.split('-')[2]);
                                $('body').hrefClick('/admin/activity/album/detail/'+_groups.split("-")[2]);
                            }else{
                                new $.zui.Messager('已经到底啦', {
                                    icon: 'bell', // 定义消息图标
                                    type: 'warning'
                                }).show();
                            }
                        });
                    });

                    $('.activity_file_edit').on('click', function () {
                        new $.zui.Messager('媒体库图片禁止编辑', {
                            icon: 'bell', // 定义消息图标
                            type: 'warning'
                        }).show();
                    });
                    $('.activity_file_del').on('click', function () {
                        new $.zui.Messager('正在删除媒体库指定图片', {
                            icon: 'bell', // 定义消息图标
                            type: 'info'
                        }).show();
                    });

                }else{
                    new $.zui.Messager('列表加载失败，请联系管理员。', {
                        type: 'danger',
                        icon: 'frown',//smile
                        close: true,
                        placement: 'center' // 定义显示位置
                    }).show();
                }
            });
        }

        $(function () {
            initFileList();
        });



    </script>
</div>
</body>
</html>